<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>上传课程</title>
		<link rel="stylesheet" href="../../resources/css/uploadcourse.css" />
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<script type="text/javascript" src="../../resources/js/jquery-1.11.1.min.js"></script>
		<!--<script type="text/javascript" src="../../resources/layui/layui.all.js"></script>-->
		<script type="text/javascript" src="../../resources/js/qiniu_img_upload.js"></script>
		<script type="text/javascript" src="../../resources/js/moxie.js"></script>
		<script type="text/javascript" src="../../resources/js/plupload.full.min.js"></script>
		<script type="text/javascript" src="../../resources/js/qiniu.js"></script>
		<script type="text/javascript" src="../../resources/js/qiniuMp4Upload.js"></script>
	</head>

	<body>
		<jsp:include page="/pages/common/header.jsp"></jsp:include>
		<div class="main">
			<div class="content">
				<form class="layui-form" method="post">
					<div class="layui-form-item">
						<label class="layui-form-label">课程标题</label>
						<div class="layui-input-block">
							<input type="text" id="title" required lay-verify="required" name="courseTitle" lay-verify="coursetitle" placeholder="请输入标题" class="layui-input" value="">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">课程图片</label>
						<div class="layui-input-block">
							<div id="btn-uploader">
								<span id="pickfiles" class="layui-btn layui-btn-normal">选择文件</span>
								<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" style="background:white;position:absolute;top:9px;width: 690px;margin-left: 100px;">
									<div class="layui-progress-bar" lay-percent="0%"></div>
								</div>
							</div>
						</div>
						<div>
							<img src="" name="courseImg" class="q_img" lay-verify="courseImg" style="width: 200px;height: 130px;display:none;margin-left: 109px;margin-top: 10px;" />
							<input type="hidden" name="img_src" value="" id="in_hiden" />
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">课程分类</label>
						<div class="layui-input-inline">
							<select name="coursebigtype" id="coursebigtype" style="z-index: 99999999;" lay-filter='coursebigtype'>

							</select>

						</div>
						<div class="layui-input-inline">
							<select name="coursesmalltype" id="coursesmalltype" lay-filter='coursesmalltype'>

							</select>
						</div>
						<div class="layui-input-inline">
							<select name="courseThreeType" id="courseThreeType">

							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">课程级别</label>
						<div class="layui-input-inline">
							<select name="courseLevel" id="courseLevel">
								<option value="0">初级</option>
								<option value="1">中级</option>
								<option value="2">高级</option>
							</select>

						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">课程费用</label>
						<div class="layui-input-block">
							<input style="width: 200px;" type="text" name="courseprice" id="courseprice" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">适合人群</label>
						<div class="layui-input-block">
							<input type="text" name="people" id="adopt" required lay-verify="required" placeholder="适合人群" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="texta" style="margin-left: 38px;">
						<textarea id="coursedetails" name="coursedetails">课程描述。。。。。。</textarea>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block" id="btn">
							<button class="layui-btn layui-btn-danger" id="courseSubmit" lay-submit="" lay-filter="play">保存课程基本信息</button>
						</div>
					</div>
				</form>

			</div>
		</div>
		<jsp:include page="/pages/common/footer.jsp"></jsp:include>
		
		<script>
			layui.use(['form', 'layer', 'layedit'], function() {
				var layedit = layui.layedit;
				var courseedit = layedit.build('coursedetails', {
					height: 200, //设置编辑器高度
					tool: [
						'strong' //加粗
						, 'italic' //斜体
						, 'underline' //下划线
						, 'del' //删除线
						, '|' //分割线
						, 'left' //左对齐
						, 'center' //居中对齐
						, 'right' //右对齐
						, 'link' //超链接
						, 'unlink' //清除链接
					]
				});
				var form = layui.form;
				var layer = layui.layer;
				//监听提交
				form.on('submit(play)', function(data) {
					var coursecontent = layedit.getContent(courseedit);
					var title = $("#title").val();
					var coursePicture = $("#in_hiden").val();
					var courseLevel = $("#courseLevel").val();
					var courseThreeType = $("#courseThreeType").val();
					var courseprice = $("#courseprice").val();
					var adopt = $("#adopt").val();
					var loading = layer.msg('请稍后....', {
						icon: 16,
						shade: 0.01
					});
					alert(title + "////" + coursePicture + "///" + courseLevel + "////" + courseThreeType + "/////" + courseprice + "///" + adopt + "////" + coursecontent);
					$.ajax({
						type: "post",
						url: "/course/addCourse.action",
						data: {
							"course.courseName": title,
							"course.coursePicture": coursePicture,
							"course.courseLevel": courseLevel,
							"course.courseTypeId": courseThreeType,
							"course.courseIntergal": courseprice,
							"course.adopt": adopt,
							"course.courseDescribe": coursecontent
						},
						dataType: "json",
						success: function(data) {
							var result = data.result;
							if(result == true) {
								layer.msg('保存成功', {
									icon: 1,
									time: 1000,
								});

							} else {
								layer.msg('发生错误，请重新填写信息！', {
									icon: 2,
									time: 1000,
								});
							}
						},
						done: function() {
							layer.close(loading);
						},
						error: function() {
							layer.msg('发生错误，请重新填写信息！', {
								icon: 2,
								time: 1000,
							});
						}
					});
					return false;
				});
				form.on('submit(addcoclass)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
		</script>
		<script>
			$(document).ready(function() {
				getTokenMessage();
				$.ajax({
					url: '/course/queryAllBigCourseType.action',
					dataType: 'json',
					type: 'post',
					success: function(data) {
						$('#coursebigtype').append("<option>请选择分类</option>");
						$.each(data.courseBigId, function(index, item) {
							$('#coursebigtype').append("<option value=" + item.courseTypeId + ">" + item.typeValue + "</option>");
						})

						renderForm();
					}
				});
			});

			function renderForm() {
				layui.use('form', function() {
					var form = layui.form; //高版本建议把括号去掉，有的低版本，需要加()
					form.render('select');
				});
			}

			layui.use("form", function() {
				var form = layui.form;
				form.on('select(coursebigtype)', function(data) {
					var obj = document.getElementById('coursesmalltype');
					obj.options.length = 0;
					$.ajax({
						url: '/course/queryAllTwoCourseType.action',
						dataType: 'json',
						data: {
							"coursetype.courseSubTypeId": data.value
						},
						type: 'post',
						success: function(data) {
							$.each(data.courseTwoId, function(index, item) {
								$('#coursesmalltype').append("<option value=" + item.courseTypeId + ">" + item.typeValue + "</option>");
							})
							renderForm();
						}
					});
				});

				form.on('select(coursesmalltype)', function(data) {
					var obj = document.getElementById('courseThreeType');
					obj.options.length = 0;
					$.ajax({
						url: '/course/queryAllTwoCourseType.action',
						dataType: 'json',
						data: {
							"coursetype.courseSubTypeId": data.value
						},
						type: 'post',
						success: function(data) {
							$.each(data.courseTwoId, function(index, item) {
								$('#courseThreeType').append("<option value=" + item.courseTypeId + ">" + item.typeValue + "</option>");
							})
							renderForm();
						}
					});
				});
			});

			function getTokenMessage() {
				$.ajax({
					url: '/qiniu/fileUplaod.action',
					type: 'POST',
					data: {},
					cache: false,
					contentType: false, //不可缺
					processData: false, //不可缺
					dataType: 'json',
					success: function(data) {
						var obj = data;
						uploaderReady(obj.uptoken);
						uploadMp4(obj.uptoken);
					}
				});
			}
		</script>
	</body>

</html>